<template>
	<view class="content">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" :class="item.order.length>0?'luo':''"
				@click="des(item)">
				<view class="left font30" :class="item.order.length>0?'heng':''" v-if="index +1 >= 10">
					{{index + 1}}
				</view>
				<view class="left font30" :class="item.order.length>0?'heng':''" v-else>
					0{{index + 1}}
				</view>
				<view class="userinfo">
					<!-- <view class="icon"> -->
					<!-- <image src="https://wx.caobenjiankang.com/image/gril.png" mode="aspectFit" v-if="item.sex == 0"></image>
						<image src="https://wx.caobenjiankang.com/image/nan.png" mode="aspectFit" v-if="item.sex == 1"></image> -->
					<!-- </view> -->
					<view class="title font22" v-if="item.order.length>0">
						{{item.order[0].id}}
					</view>
					<view class="name font22" v-if="item.order.length>0">
						{{item.order[0].coach}}
					</view>
				</view>
				<view class="info">
					<view class="s_type">
						<view class="type font22" v-if="item.order.length>0">
							{{item.order[0].service[0]}}
						</view>
						<view class="status font22">
							{{item.order.length>0?'圈牌':'空闲'}}
						</view>
					</view>
					<view class="time font22" :style="item.order.length>0?'color:#ffffff':'color:#000000'">
						{{item.time}}
					</view>
				</view>
			</view>
		</view>
		<clh-popup :position="position" v-model="showPopup" :canSlide="false" :closeBtn="true" round="12">
			<view class="popup">
				<view class="title font24 fontw">
					详情
				</view>
				<view class="listD">
					<view class="info" v-for="(item,index) in o_list.order" :key="item.id">
						<view class="left">
							<view class="icon">
								<image src="https://wx.caobenjiankang.com/image/shareholder/team.png" mode="aspectFit"></image>
							</view>
							<view class="text font18">
								服务人员：{{item.coach}}
							</view>
						</view>
						<view class="left">
							<view class="icon">
								<image src="https://wx.caobenjiankang.com/image/shareholder/tt.png" mode="aspectFit"></image>
							</view>
							<view class="text font18">
								服务项目:{{item.service[0]}}
							</view>
						</view>
						<view class="left">
							<view class="icon">
								<image src="https://wx.caobenjiankang.com/image/shareholder/tts.png" mode="aspectFit"></image>
							</view>
							<view class="text font18">
								价格:{{item.pay_price}}
							</view>
						</view>
					</view>
				</view>
				<view class="btn font24" @click="qingchang">
					清场
				</view>
			</view>
		</clh-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				days: '1,2,3,4,5,6,7',
				dayWeekList: [],
				list: [],
				position: 'center',
				showPopup: false,
				o_list: {}
			};
		},
		onLoad(op) {
			this.id = op.id
			this.dayWeekArray()
			this.getCurrentTime()
			this.getData(op.id)
		},
		methods: {
			async getData(id) {
				const data = await this.$api.shareholder.zongfendaodian({
					store_id: id
				})
				this.list = data
			},
			dayWeekArray() {
				const selectedDays = this.days.split(",").map(Number);
				const now = new Date();
				const today = now.getDay(); //0-6，0代表周日
				const daysToAdd = selectedDays.map((day) => (day >= today ? day - today : 7 - (today - day))).sort((a, b) =>
					a -
					b);
				for (const daysToAdd of daysToAdd) {
					const newDate = new Date(now);
					newDate.setDate(newDate.getDate() + daysToAdd);
					const year = newDate.getFullYear();
					const month = String(newDate.getMonth() + 1).padStart(2, "0");
					const date = String(newDate.getDate()).padStart(2, "0");
					let week = "";
					switch (newDate.getDay()) {
						case 0:
							week = "Sun";
							break;
						case 1:
							week = "Mon";
							break;
						case 2:
							week = "Tue";
							break;
						case 3:
							week = "Wed";
							break;
						case 4:
							week = "Thu";
							break;
						case 5:
							week = "Fri";
							break;
						case 6:
							week = "Sat";
							break;
					}
					this.dayWeekList.push({
						year: year,
						month: month,
						monDate: date,
						week: week,
						state: false,
						type: true
					});
				}
			},

			//选择时间
			selDayWeek(index, item) {
				if (!this.dayWeekList[index].type) {
					return
				}
				if (this.dayWeekList[index].state) {
					this.dayWeekList[index].state = false;
				} else {
					for (let i in this.dayWeekList) {
						this.dayWeekList[i].state = false;
					};
					this.dayWeekList[index].state = true;
				}
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				this.dayWeekList.map(item => {
					if (item.year < year) {
						item.type = false
					} else {
						if (item.month < month) {
							item.type = false
						}
					}
					if (item.monDate == day) {
						item.state = true
					}
				})
			},
			des(list) {
				if (list.order.length > 0) {
					this.showPopup = true
					this.o_list = list
				} else {
					uni.showToast({
						icon: 'error',
						title: '空闲',
						duration: 1000
					})
				}
			},
			async qingchang() {
				const data = await this.$api.shareholder.siteClearance({
					store_id: this.id,
					time: this.o_list.time
				})
				uni.showToast({
					icon: 'success',
					title: data,
					duration: 1000
				})
				this.showPopup = false
				this.getData(this.id)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.dayWeekMain {
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 31rpx 26rpx 52rpx 23rpx;
			background-color: #fff;

			.dayWeekBox {
				width: 82rpx;
				height: 99rpx;
				border-radius: 21rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.textSize {}

				.hui {
					color: #33333350;
				}
			}

			.selBg1 {
				background: #fff;
				color: #000;
			}

			.selBg2 {
				background: #1EB481;
				color: #fff;
			}
		}

		.list {
			padding: 30rpx 28rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-gap: 10rpx;


			.luo {
				background: #A8A8A8 !important;

				.heng {
					background: #DCDCDC !important;
				}

				.userinfo {
					.title {
						color: #ffffff !important;
					}

					.name {
						color: #ffffff !important;
					}
				}

				.info {
					.type {
						color: #FFFFFF !important;
					}
				}
			}

			.item {
				width: 167rpx;
				height: 181rpx;
				background: #FBFF3D;
				border-radius: 10rpx;
				border: 1px solid #999999;

				.left {
					background: #FFFFA7;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					border: 1px solid #999999;
					padding: 4rpx 0 4rpx 12rpx;
				}

				.userinfo {
					display: flex;
					align-items: center;

					.icon {
						width: 26rpx;
						height: 26rpx;
						display: flex;
						align-items: center;
						margin-right: 8rpx;

						image {
							width: 26rpx;
							height: 26rpx;
						}
					}

					.title {
						margin-right: 8rpx;
						color: #666666;
					}

					.name {
						color: #666666;
					}
				}

				.info {
					padding: 14rpx 7rpx;

					.s_type {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 18rpx;

						.type {
							color: #333333;
						}

						.status {
							background: #8A97A8;
							border-radius: 5rpx;
							width: 51rpx;
							height: 30rpx;
							color: #fff;
							text-align: center;
							line-height: 30rpx;
						}
					}

					.time {
						color: #ffffff;
					}
				}
			}
		}

		/deep/.c-model {
			.c-model-content {
				width: 85% !important;

				.popup {
					padding: 25rpx 45rpx 27rpx 46rpx;

					.title {
						text-align: center;
						margin-bottom: 37rpx;
					}

					.listD {
						max-height: 30vh;
						overflow-y: auto;
						padding: 24rpx 0;

						.info {
							color: #333333;
							line-height: 42rpx;
							padding: 18rpx 26rpx;
							margin-bottom: 19rpx;

							.left {
								.icon {
									width: 29rpx;
									height: 29rpx;
									display: flex;
									align-items: center;
									margin-right: 10rpx;

									image {
										width: 29rpx;
										height: 29rpx;
									}
								}

								.text {}
							}
						}
					}

					.btn {
						height: 63rpx;
						background: linear-gradient(0deg, #2AB883 0%, #89D894 100%);
						border-radius: 21rpx;
						color: #FFFFFF;
						line-height: 63rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>